<template>
	<view class="ui-product-item" @tap="$emit('click', model)">
		<view class="img-wrapper">
			<image :src="model.pic" mode="aspectFill" class="pro-img"></image>
		</view>
		<view class="pro-detail">
			<view class="pro-name">{{model.productName}}</view>
			<!--view class="pro-desc">{{model.productDesc || '暂无商品描述'}}</view-->
			<view class="bottom-info">
				<view class="price-wrapp">&yen;{{model.soldPrice || model.price || 0}}</view>
				<view class="stocked">{{model.soldStock}}人付款</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['model'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.ui-product-item {
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	background-color: #fff;
	.img-wrapper {
		overflow: hidden;
		border-radius: 5rpx;
		.pro-img {
			width: 160rpx;
			height: 160rpx;
		}
	}
	.pro-detail {
		flex: 1;
		width: 0;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.pro-name {
			font-size: 28rpx;
		}
		.pro-desc {
			font-size: 24rpx;
			color: #666;
		}
		.bottom-info {
			.price-wrapp {
				font-weight: bold;
				color: #e41f19;
			}
			.stocked {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
